<!--
 * @Author: your name
 * @Date: 2021-12-17 16:49:29
 * @LastEditTime: 2021-12-17 19:52:36
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day9\app\src\views\Add.vue
-->
<template>
  <div class="login">
    <h2>登录页</h2>
    <a-form
      ref="formRef"
      name="custom-validation"
      :model="formState"
      :rules="rules"
      v-bind="layout"
      @finish="handleFinish"
      @validate="handleValidate"
      @finishFailed="handleFinishFailed"
    >
      <a-form-item has-feedback label="姓名:" name="name">
        <a-input
          v-model:value="formState.name"
          type="text"
          autocomplete="off"
        />
      </a-form-item>
      <a-form-item has-feedback label="密码:" name="pass">
        <a-input
          v-model:value="formState.pass"
          type="password"
          autocomplete="off"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" html-type="submit">Submit</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref} from "vue";
import type { UnwrapRef } from "vue";
import {login} from "../api/axios"
import {useRouter} from "vue-router"
interface FormState {
  pass: string;
  name: string;
}
export default defineComponent({
  setup() {
    const formRef = ref();
    let router=useRouter()
    const formState: UnwrapRef<FormState> = reactive({
      pass: "",
      name: "",
    });
    const rules = {
      name: [
        {
          required: true,
          message: "Please input Activity name",
          trigger: "blur",
        }
      ],
      pass: [
        {
          required: true,
          message: "Please input Activity name",
          trigger: "blur",
        },
        { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
      ],
    };
    const handleFinish = async(values: FormState) => {
      console.log(values, formState);
      let res:any=await login(values)
      if(res.status==200||res.status==201){
          router.push({
            path:"/list"
          })
      }
    };
    const handleFinishFailed = (errors:any) => {
      console.log(errors);
    };
    const handleValidate = (...args:any) => {
      console.log(args);
    };
    return {
      formState,
      formRef,
      rules,
      handleFinish,
      handleFinishFailed,
      handleValidate
    };
  },
});
</script>
